<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/fullpage.min.css">
    <link rel="stylesheet" href="./css/examples.css">
    <!-- <link rel="stylesheet" href="../css/main.css"> -->
    <script src="../js/flexible.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/fullpage.min.js"></script>
</head>

<body>
    <!-- 导航部分 -->
    <!-- <ul id="menu">
        <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First slide</a></li>
        <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
        <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
    </ul> -->

    <div id="dowebok">
        <div class="section one">
            <!-- <div class="tupian">
                <img class="img1" src="./img/赤红行星.png" alt="">
                <img class="img2" src="./img/月球狂奔.png" alt="">
                <img class="img3" src="./img/鲁达行星.png" alt="">
            </div> -->
            <video autoplay loop muted class="video">
                <source src="./img/v1.mp4" type="video/webm">
            </video>
            <div class="begin animate__animated animate__pulse animate__infinite	infinite">BEGIN</div>
            <h2 class="h2 animate__animated animate__fadeInLeft">基本信息</h2>

            <h3 class=" h3 animate__animated animate__fadeInDownBig ">兴趣爱好</h3>
            <h1 class="h1 animate__animated animate__fadeInRight">成长轨迹</h1>
        </div>
        <div class="section two">
            <div class="t2">
                <!-- <img src="./img/默认文件1629083891090.png" alt=""> -->
                <div class="header">
                    <!-- <div class="ren"><img src="./img/阳小妹.png" alt="">
                    </div> -->
                    <div class="lun1">
                        <!-- Swiper -->
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="./img/imgScreenshot_20210804_202043.jpg" alt="">
                                </div>
                                <div class="swiper-slide"><img src="./img/imgScreenshot_20210804_202032.jpg" alt="">
                                </div>
                                <div class="swiper-slide"><img src="./img/imgScreenshot_20210804_202016.jpg" alt="">
                                </div>
                                <div class="swiper-slide"><img src="./img/imgScreenshot_20210804_202006.jpg" alt="">
                                </div>

                            </div>
                            <div class="swiper-scrollbar"></div>
                        </div>

                    </div>
                </div>
                <h class="name ">姓名：玛雅哈</h>
                <h class="age ">年龄：100</h>
                <h class="sex ">性别：女</h>
                <h class="tab ">TEL:1900000000000</h>

            </div>
            <div class="next"></div>
        </div>

        <div class="section three">
            <div class="th">
                <div class="th1 ">
                </div>
                <p class="th2 ">摄影&nbsp &nbsp&nbsp&nbsp尤克里里</p>

                <div class="th4">
                    <p>&nbsp &nbsp&nbsp&nbsp让历史定格在一瞬间，让一瞬间成为永恒，摄影从出现的那一刻起，就赋予了它记录的使命,记录美好的生活时刻才会拥有更好的幸福。</p>
                </div>
                <div class="th5">
                    <p>&nbsp &nbsp&nbsp&nbspUkulele即夏威夷四弦琴，是一种夏威夷的传统弹拨乐器，发明于葡萄牙，盛行于夏威夷，乐器种类为弹拨类弦鸣乐器。</p>
                </div>
                <div class="th6"><img src="./img/柠檬.png" alt=""></div>
                <div class="th7"><img src="./img/椰子.png" alt=""></div>
                <div class="th8"><img src="./img/面性椰子树.png" alt=""></div>
                <div class="next2"></div>
            </div>
        </div>

        <div class="section four">

            <div class="fou">
                <div class="ff"><img src="./img/默认文件1629013562677.png" alt="">
                    <div class="g1"><img src="./img/默认文件1629015069034.png" alt=""></div>
                    <h1 class="g11">XX小学</h1>
                    <h1 class="g13">XX中学</h1>
                    <h1 class="g12">XX中学</h1>
                    <h1 class="g14">南阳理工</h1>
                    <div class="g3"><img src="./img/默认文件1629015110584.png" alt=""></div>
                    <div class="g4"><img src="./img/默认文件1629015129483.png" alt=""></div>
                    <div class="g2"><img src="./img/默认文件1629015095353.png" alt=""></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 轮播js
        var swiper = new Swiper('.swiper-container', {
            scrollbar: {
                el: '.swiper-scrollbar',
                hide: true,

            }, autoplay: true
        });//over
        $(function () {
            $('#dowebok').fullpage({
                anchors: ['one', 'two', 'three', 'four'],
                'navigation': true,
            });
        });

        $(document).ready(function () {
            $('#fullpage').fullpage();
            // scrollOverflow: true;
            // 
        });
        var script = document.createElement('script')
        script.src = 'https://s5.cnzz.com/z_stat.php?id=1253231826&web_id=1253231826'
        script.async = true
        document.body.appendChild(script)
        //自定义
        function yema() {
            var index = 1;
            if ($.fn.fullpage.moveSectionDown()) {
                index++;
            }
            console.log(index);
        }
        var h1 = document.querySelector(".h1");
        var h2 = document.querySelector(".h2");
        var h3 = document.querySelector(".h3");
        var begin = document.querySelector('.begin');
        var next = document.querySelector(".next");
        begin.addEventListener('click', function () {
            $(".begin").removeClass("animate__infinite	infinite")

            // $('.begin').addClass("animate__animated animate__bounceOut");

            $(".begin").fadeOut();
            h1.style.display = "block";
            h2.style.display = "block";
            h3.style.display = "block";
        })
        h1.addEventListener('click', function () {
            $.fn.fullpage.silentMoveTo('four', 4);
            $(".g1").css("display", "block");
            $(".g1").addClass("animate__animated animate__bounceInUp");
            // $(".four").css("background", "url(img/img52134795600801326891629018727219.jpg)").fadeIn();
            setTimeout(function () {

                $(".g2").css("display", "block");
                $(".g2").addClass("animate__animated animate__bounceInUp");
                // $(".four").css("background", "url(img/img52365605088482675981629018817640.jpg)").fadeIn();
                setTimeout(function () {

                    $(".g3").css("display", "block");
                    $(".g3").addClass("animate__animated animate__bounceInUp");
                    // $(".four").css("background", "url(img/img52365605088482675981629018807666.jpg)").fadeIn();
                    setTimeout(function () {

                        $(".g4").css("display", "block");
                        $(".g4").addClass("animate__animated animate__bounceInUp");
                        // $(".four").css("background", "url(img/img52134795600801326891629018733294.jpg)").fadeIn();
                        setTimeout(function () {
                            // $(".four").css("backgroundColor", "#FFFFFF");

                        }, 1000)
                    }, 700)
                }, 700)

            }, 700)
        })

        var name = document.querySelector('.name');
        var sex = document.querySelector(".sex");
        var age = document.querySelector(".age");
        h2.addEventListener('click', function () {
            // $(".one").fadeOut();
            // $(".two").fadeIn();
            // $.fn.fullpage.silentMoveTo('firstSlide', 3);
            $.fn.fullpage.moveSectionDown();
            $(".name").addClass("animate__animated animate__fadeInDownBig")
            $(".age").addClass("animate__animated animate__fadeInTopLeft")
            $(".sex").addClass("animate__animated animate__fadeInTopRight")
            $(".tab").addClass('animate__animated animate__fadeInBottomLeft')
        })
        // h3.addEventListener('click', function () {

        //     $.fn.fullpage.silentMoveTo('three', 3);
        // $(".th1").addClass("animate__animated animate__fadeInDown")

        // $(".th2").addClass("animate__animated animate__fadeInLeft")
        // $(".th4").addClass("animate__animated animate__fadeInLeft")
        // $(".th5").addClass("animate__animated animate__fadeInRight")

        // 
        // $('.three').addClass("animate__animated animate__fadeOutDownBig")
        // $.fn.fullpage.silentMoveTo
        // })

        // $(".one").addClass("animate__animated animate__bounceOutDown")
        // setTimeout(function () {
        //     $(".one").fadeOut();
        //     $(".two").fadeIn(2000, 0.5)
        // }, 1000)

        $(function () {
            $('.next, .h3').click(function () {
                $.fn.fullpage.silentMoveTo('three', 3);

                $(".th1").addClass("animate__animated animate__fadeInDown")

                $(".th2").addClass("animate__animated animate__fadeInLeft")
                $(".th4").addClass("animate__animated animate__fadeInLeft")
                $(".th5").addClass("animate__animated animate__fadeInRight")

            })
            $(".next2").click(function () {
                $.fn.fullpage.moveSectionDown();
                $(".g1").css("display", "block");
                $(".g1").addClass("animate__animated animate__bounceInUp");
                // $(".four").css("background", "url(img/img52134795600801326891629018727219.jpg)").fadeIn();
                setTimeout(function () {

                    $(".g2").css("display", "block");
                    $(".g2").addClass("animate__animated animate__bounceInUp");
                    // $(".four").css("background", "url(img/img52365605088482675981629018817640.jpg)").fadeIn();
                    setTimeout(function () {

                        $(".g3").css("display", "block");
                        $(".g3").addClass("animate__animated animate__bounceInUp");
                        // $(".four").css("background", "url(img/img52365605088482675981629018807666.jpg)").fadeIn();
                        setTimeout(function () {

                            $(".g4").css("display", "block");
                            $(".g4").addClass("animate__animated animate__bounceInUp");
                            // $(".four").css("background", "url(img/img52134795600801326891629018733294.jpg)").fadeIn();
                            setTimeout(function () {
                                // $(".four").css("backgroundColor", "#FFFFFF");

                            }, 1000)
                        }, 700)
                    }, 700)

                }, 700)
            })
        })








                // 初始化fullpage
                // $(document).ready(function () {
                //     $('#fullpage').fullpage();

                //     next.addEventListener('click', function () {
                //         // $(".next").fullpage
                //         // $.fn.fullpage.moveSectionDown();
                //         $.fn.fullpage.silentMoveTo('secondPage', 3);
                //     })


            //     setTimeout(function () {
            //         $.fn.fullpage.silentMoveTo('firstSlide', 2);
            //         $("#section").removeClass("video")
            //     }, 200)
        // })






        // var next = document.querySelector(".next");
        // next.addEventListener('click', function () {
        //     $.fn.fullpage.moveSectionDown();
        // })




        // video.playbackRate = 1.5;
        // setTimeout(function () {
        //     begin.style.display = "block"
        //     $(".begin").addClass("animate__animated animate__heartBeat")
        // }, 1300)
        // begin.addEventListener('click', function () {

        //     $(".begin").addClass("animate__animated animate__flipOutY")
        //     $(".top1").remove()

        // })

    </script>

</body>

</html>